<template>
  <div class="container">
    <el-card style="margin:10px">
      <el-row type="flex" justify="space-between">
        <el-col :span="20">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input
                v-model="formDate.keyword"
                placeholder="请输入关键字"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formDate.state" placeholder="请选择状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear" size="small">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="actAddOpen = true" size="small" icon="el-icon-edit"
            >新增技巧</el-button
          >
        </el-col>
      </el-row>
      <div>
        <el-alert :title="`数据一共${counts}条`" type="info" :closable="false" show-icon>
        </el-alert>
      </div>
      <div>
        <el-table :data="data" stripe style="width: 100%">
          <el-table-column type="index" :index="indexMethod" label="序号" width="120">
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="380">
           <template #default='{row}'>
               {{row.title}}
            <a @click.prevent="openVideo(row.videoURL)" v-if="row.videoURL" href="#" class="el-icon-film"></a>
           </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="createTime" label="录入时间" width="130">
            <template #default="{ row }">{{row.createTime|parseTimeByString}}</template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="{ row }">
              {{ row.state ? "启用" : "禁用" }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="180">
            <template  #default="{ row }">
              <el-button type="text" size="small" @click="preview(row.id)">预览</el-button>
              <el-button  type="text" size="small" @click="active(row)" >{{ row.state ? "禁用" : "启用" }}</el-button>
              <el-button type="text" size="small" :disabled="row.state !== 0" @click="compile(row.id)" >修改</el-button>
              <el-button type="text" size="small" :disabled="row.state !== 0" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
      <el-dialog :visible="actAddOpen" :title="listAdd.id ? '编辑文章' : '添加文章'" @close='close' >
        <el-form :model="listAdd" ref="deptForm" :rules="rules">
          <el-form-item label="文章标题" prop="title"
            ><el-input v-model="listAdd.title" placeholder="请输入文章标题"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody">
            <quill-editor v-model="listAdd.articleBody" style="height: 200px"></quill-editor>
          </el-form-item>
          <el-form-item label="视频地址"
            ><el-input v-model="listAdd.videoURL" placeholder="请输入视频地址"></el-input
          ></el-form-item>
        </el-form>
        <template #footer class="dialog-footer">
          <el-button @click="actAddOpen = false">取 消</el-button>
          <el-button type="primary" @click="addList">确 定</el-button>
        </template>
      </el-dialog>
    </el-card>
     <el-dialog :visible="actOpen" title="预览文章" width="60%"   @close='dei'>
      <div class="box">
        <div class="title">
          <h2 style="margin:0;padding:0">{{listAdd.title}}  </h2>
         <p>  <span>{{listAdd.createTime|parseTimeByString}} </span>{{listAdd.videoURL}} <span><i  class="el-input__icon el-icon-view"></i>{{listAdd.visits}}</span></p>
        </div>
        <div class="content" v-html="listAdd.articleBody">
          </div>
      </div>
    </el-dialog>
    <div class="video-preview" v-if="videoURL">
      <div class="close" @click="closeVideo()"><span class="el-icon-close"></span></div>
      <div class="box">
        <video ref="video" controls :src="videoURL"></video>
      </div>
    </div>
  </div>
</template>

<script>
// import Preview from '@/module-hmmm/components/articles-preview'
import {
  list, add,
  remove, changeState, detail, update
} from '@/api/hmmm/articles.js'
export default {
  name: 'Artiles',

  data () {
    return {
      formDate: {
        state: undefined, // 状态
        keyword: ''
      },
      actAddOpen: false,
      actOpen: false,
      counts: 2,
      pagesize: 5,
      page: 1,
      data: [],
      videoURL: null,
      listAdd: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: ['blur', 'change'] }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: ['blur', 'change'] }]
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    indexMethod (index) {
      // index 从0开始
      return index + 1 + this.pagesize * (this.page - 1)
    },
    // 打开对话框
    openVideo (url) {
      this.videoURL = url

      this.$nextTick(() => {
        if (this.$refs.video.networkState === 3) return
        this.$refs.video.play()
      })
    },
    closeVideo () {
      console.log(888)
      this.$refs.video.pause()
      this.videoURL = null
    },
    dei () {
      this.actOpen = false
    },
    close () {
      this.actAddOpen = false
      this.listAdd = {}
      this.$refs.deptForm.resetFields()
    },
    // 清空
    clear () {
      this.formDate.state = undefined
      this.formDate.keyword = ''
    },
    // 搜索
    async search () {
      // console.log(this.formDate)
      // const res = await simple({ ...this.formDate, page: this.page, pagesize: this.pagesize })
      // console.log(res)
      this.page = 1
      this.getList()
    },
    // 获取数据
    async getList () {
      const { data } = await list({ page: this.page, pagesize: this.pagesize, ...this.formDate })
      // console.log(data)
      console.log(data)
      this.data = data.items
      this.counts = data.counts
    },
    // 添加数据
    async addList () {
      if (this.listAdd.id) {
        await update(this.listAdd)
        this.$message.success('修改文章成功')
      } else {
        await add(this.listAdd)
        this.$message.success('添加文章成功')
      }

      this.close()
      this.getList()
    },
    // 每页显示的数据条数发生了变化
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getList()
    },
    // 页码值发生了变化
    handleCurrentChange (val) {
      this.page = val
      this.getList()
    },
    // 修改状态
    async active (data) {
      let state
      if (data.state === 0) {
        state = 1
      } else {
        state = 0
      }
      console.log(data)
      const res = await changeState({ id: data.id, state: state })
      this.$message.success('修改状态成功')
      console.log(res)
      this.getList()
    },
    // 删除
    del (id) {
      this.$confirm('确定要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(id)
        await remove({ id })
        this.$message.success('删除数据成功')
        this.getList()
      }).catch(() => {
        console.log('取消了')
      })
    },
    // 编辑
    async compile (id) {
      const { data } = await detail({ id })
      console.log(data, 999)
      this.listAdd = data
      this.actAddOpen = true
    },
    // 预览
    async preview (id) {
      console.log(111)
      this.actOpen = true
      const { data } = await detail({ id })
      this.listAdd = data
    }
  }
}
</script>

<style scoped lang='scss'>
  .el-icon-film{
    color: blue;
    font-size: 18px;
  }
.box {

  .title {
    height: 70px;
    border-bottom: 1px dashed #ccc;
  }
  .content{
    background-color: #f5f5f5;
    padding: 10px;
  }
}
.block {
  float: right;
  margin-bottom: 15px;
  padding-top: 15px;
}
.video-preview{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 9999;
  .close{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%,0);
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    z-index: 99;
  }
  .box{
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    video{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
